<template>
<div class="app-container">
<el-card shadow="never" class="panel">
<div slot="header" class="panel__header"><i class="el-icon-user panel__icon"></i><div class="panel__title">角色权限管理</div></div>


<el-row :gutter="12">
<el-col :md="8" :sm="24">
<el-table :data="roles" height="420" border highlight-current-row @current-change="selRole">
<el-table-column prop="roleName" label="角色"/>
<el-table-column prop="roleKey" label="标识"/>
</el-table>
</el-col>
<el-col :md="16" :sm="24">
<el-card shadow="never">
<div slot="header">菜单权限</div>
<el-tree ref="tree" :data="menuTree" node-key="id" show-checkbox highlight-current :props="{label:'label', children:'children'}" />
<div style="margin-top:12px; text-align:right">
<el-button type="primary" :loading="saving" @click="saveAuth">保存权限</el-button>
</div>
</el-card>
</el-col>
</el-row>
</el-card>
</div>
</template>


<script>
import request from '@/utils/request'
export default { name:'AuthorityManage', data(){ return{ roles:[], menuTree:[], curRole:null, saving:false } }, methods:{ async fetch(){ const [r1,r2]= await Promise.all([ request({url:'/system/role/list',method:'get'}), request({url:'/system/menu/tree',method:'get'}) ]); this.roles=r1.rows||[]; this.menuTree=r2.data||[] }, selRole(row){ this.curRole=row; this.loadChecked() }, async loadChecked(){ if(!this.curRole) return; const res= await request({ url:'/system/role/menuIds', method:'get', params:{ roleId:this.curRole.roleId } }); this.$nextTick(()=>{ this.$refs.tree.setCheckedKeys(res.data||[]) }) }, async saveAuth(){ if(!this.curRole) return; this.saving=true; try{ const ids=[...this.$refs.tree.getCheckedKeys(), ...this.$refs.tree.getHalfCheckedKeys()]; await request({ url:'/system/role/assignMenu', method:'post', data:{ roleId:this.curRole.roleId, menuIds:ids } }); this.$message.success('已保存') }finally{ this.saving=false } }, }, mounted(){ this.fetch() } }
</script>


<style scoped>
.panel{ border:1px solid #ebeef5 }
.panel__header{ display:flex; align-items:center; gap:8px }
.panel__icon{ color:#5d86ff }
</style>